<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基础应用作业</title>
    <style>
        .modul{
            /* 大小 */
            width: 100px;
            height: 100px;
            /* 边框 */
            border: 1px solid red;
            /* 内边距 */
            padding: 20px;
            /* 外边距 */
            margin:20px;
            /* 背景颜色 */
            background-color: blue;
            /* 内容颜色 */
            color:white
        }
        table{
            width: 750px;
            height: 300px;
            border-collapse: collapse;
            text-align: center;
            font-size: 130%;
        }
        table caption{
            font-size: 200%;
            font-weight: bold;
            margin-bottom: 30px;
        }
        th,
        td{
            border: 1px solid #ff56b1;
            
        }
        table tr th{
            font-weight:500px;
        }
        table .footer{
            background-color: #CADEFD;
        }
        table tr .left{text-align: left;padding-left: 1em;}
        
        form{
            margin: 18px;
            font-weight: bold;
        } 
        form input[type="text"],
        textarea{
            margin-bottom:26px;
            width: 370px;
            border: 1.5px solid #6166FF;
            border-radius:3px;
        }
        form input[type="text"]{
            height: 42px;
        }
        form input[type="text"]:focus{
          border-color: red;
          outline: none;
        }
        form textarea{
            height: 94px;
        }
        form span{font-size: large;font-weight: 400;}
        form input[type="submit"]{
            width:82px;
            height:48px;
            background-color: #1583db;
            border: none;
            color: white;
            font-size: large;
        }
        .section{
            width:400px;
            height: 460px;
            padding: 16px;
        }
        .section .arrow{
            margin-left:-20px;
            margin-top:8px;
            clip:rect(0px,64px,32px,32px);
            position:absolute;
            
        }
        .section .arrow:hover{
            margin-left:12px ;
            clip:rect(0px,32px,32px,0px);
            position:absolute;
        }
        .section h1,
        .arrow{display: inline;}
        .section .section1{
            width: 332px;
            height: 142px;
            margin:18px 0;
            padding: 18px;
            background-color: #f8f3f6;
        }
        .section .section2{
            width: 332px;
            padding: 18px;
            height: 142px;
            background-color: #f1f5f9;
        }
        .section .section1 .left{
            width: 164px;
            font-size: large;
            float: left;
        }
        .section .section1 .right{
            float: right;
        }
        .section .section1 p:nth-child(1){
            width: 44px;
            text-align: center;
            color: red;
            border-radius:3px;
            border: 1px solid red;
        }
        .section .section1 p:nth-child(2){
            color:#999999;
        }
        
        .section .wp{
            height: 140px;
            width: 140px;
        }

        .section .section2 .left{
            width: 164px;
            font-size: large;
            float: left;
        }
        .section .section2 .right{
            float: right;
        }
        .section .section2 p:nth-child(1){
            width: 44px;
            text-align: center;
            color: red;
            border-radius:3px;
            border: 1px solid red;
        }
        .section .section2 p:nth-child(2){
            color:#999999;
        }
    </style>
</head>
<body>
    <div class="modul">
        盒子内容
    </div>
   
    <table >
        <caption>产品月销量</caption>
        
            <tr>
                <th>ID</td>
                <th>产品名称</td>
                <th>销量</td>
            </tr>
        
        <tr>
            <td>2021090901</td>
            <td>马克杯</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>2021090901</td>
            <td>啤酒杯</td>
            <td>5200</td>
        </tr>
        <tr>
            <td>2021090901</td>
            <td>搪瓷杯</td>
            <td>3500</td>
        </tr>
        
        <tr class="footer">
            <th colspan="2" class="left">合计</th>
            <th>13700</th>
        </tr>
    </table>
    <form>
        收货人<br>
        <input type="text"><br>
        手机号码<br>
        <input type="text"><br>
        所在地区<br>
        <input type="text"><br>
        详细地址<br>
        <textarea cols="30" rows="10"></textarea><br>
        标签<br>
        <input type="radio" name="address"><span>家</span>
        <input type="radio" name="address"><span>公司</span>
        <input type="radio" name="address"><span>学校</span><br><br>
        设置为默认地址<input type="checkbox"><br><br>
        <input type="submit" value="提交">
    </form>

    <div class="section">
        <div class="nav">
            <h1>逛好店</h1>
            <img src="images/arrow.png" class="arrow">
        </div>
        <div class="section1">
            <div class="left">
                贝恩施京东直营官方旗舰店
                <p>自营</p>
                <p>277.9万人关注</p>
            </div>
            <div class="right">
                <img src="images/1.jpg" class="wp" >
            </div>
            
        </div>
        <div class="section2">
            <div class="left">
                美宝莲京东官方直营旗舰店
                <p>自营</p>
                <p>192.9万人关注</p>
            </div>
            <div class="right">
                <img src="images/2.jpg" class="wp" >
            </div>
        </div>
    </div>
</body>
</html>